<script setup lang="ts">
import config from '@/api/config'
import FooterToolBar from '@/components/FooterToolbar'
import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
import Mkdir from './components/Mkdir.vue'
import Rename from './components/Rename.vue'
import configColumns from './configColumns'
import InspectConfig from './InspectConfig.vue'

const table = useTemplateRef('table')
const route = useRoute()
const router = useRouter()

const basePath = computed(() => {
  let dir = route?.query?.dir ?? ''
  if (dir)
    dir += '/'

  return dir as string
})

const getParams = computed(() => {
  return {
    dir: basePath.value,
  }
})

const update = ref(1)

watch(getParams, () => {
  update.value++
})

const refInspectConfig = useTemplateRef('refInspectConfig')
const breadcrumbs = useBreadcrumbs()

function updateBreadcrumbs() {
  const filteredPath = basePath.value
    .split('/')
    .filter(v => v)

  let accumulatedPath = ''
  const path = filteredPath.map((segment, index) => {
    const decodedSegment = decodeURIComponent(segment)

    if (index === 0) {
      accumulatedPath = segment
    }
    else {
      accumulatedPath = `${accumulatedPath}/${segment}`
    }

    return {
      name: 'Manage Configs',
      translatedName: () => decodedSegment,
      path: '/config',
      query: {
        dir: accumulatedPath,
      },
      hasChildren: false,
    }
  })

  breadcrumbs.value = [{
    name: 'Dashboard',
    translatedName: () => $gettext('Dashboard'),
    path: '/dashboard',
    hasChildren: false,
  }, {
    name: 'Manage Configs',
    translatedName: () => $gettext('Manage Configs'),
    path: '/config',
    hasChildren: false,
  }, ...path]
}

onMounted(() => {
  updateBreadcrumbs()
})

watch(route, () => {
  refInspectConfig.value?.test()
  updateBreadcrumbs()
})

function goBack() {
  const pathSegments = basePath.value.split('/').slice(0, -2)
  const encodedPath = pathSegments.length > 0 ? pathSegments.join('/') : ''

  router.push({
    path: '/config',
    query: {
      dir: encodedPath || undefined,
    },
  })
}

const refMkdir = useTemplateRef('refMkdir')
const refRename = useTemplateRef('refRename')
</script>

<template>
  <ACard :title="$gettext('Configurations')">
    <template #extra>
      <AButton
        v-if="basePath"
        type="link"
        size="small"
        @click="goBack"
      >
        {{ $gettext('Back') }}
      </AButton>
      <AButton
        type="link"
        size="small"
        @click="router.push({
          path: '/config/add',
          query: { basePath: basePath || undefined },
        })"
      >
        {{ $gettext('Create File') }}
      </AButton>
      <AButton
        type="link"
        size="small"
        @click="() => refMkdir?.open(basePath)"
      >
        {{ $gettext('Create Folder') }}
      </AButton>
    </template>
    <InspectConfig ref="refInspectConfig" />
    <StdTable
      :key="update"
      ref="table"
      :api="config"
      :columns="configColumns"
      disable-delete
      disable-view
      row-key="name"
      :get-params="getParams"
      disable-query-params
      disable-modify
      :scroll-x="880"
    >
      <template #actions="{ record }">
        <AButton
          type="link"
          size="small"
          @click="() => {
            if (!record.is_dir) {
              router.push({
                path: `/config/${encodeURIComponent(record.name)}/edit`,
                query: {
                  basePath,
                },
              })
            }
            else {
              let encodedPath = '';
              if (basePath) {
                encodedPath = basePath;
              }
              encodedPath += encodeURIComponent(record.name);

              router.push({
                query: {
                  dir: encodedPath,
                },
              })
            }
          }"
        >
          {{ $gettext('Modify') }}
        </AButton>
        <AButton
          type="link"
          size="small"
          @click="() => refRename?.open(basePath, record.name, record.is_dir)"
        >
          {{ $gettext('Rename') }}
        </AButton>
      </template>
    </StdTable>
    <Mkdir
      ref="refMkdir"
      @created="() => table?.get_list()"
    />
    <Rename
      ref="refRename"
      @renamed="() => table?.get_list()"
    />
    <FooterToolBar v-if="basePath">
      <AButton @click="goBack">
        {{ $gettext('Back') }}
      </AButton>
    </FooterToolBar>
  </ACard>
</template>

<style scoped>

</style>
